<template>
  <el-drawer
    ref="drawer"
    title="回复投诉信息"
    :before-close="handleClose"
    :visible.sync="drawer"
    direction="rtl"
    custom-class="demo-drawer"
    size="50%"
    :wrapper-closable="false"
  >
    <hr>
    <el-tabs v-model="activeName" style="margin-left:20px">
      <el-tab-pane label="投诉内容" name="first">
        <div class="demo-drawer__content">
          <el-form ref="form" label-position="top" :model="complainForm">
            <el-row type="flex">
              <el-form-item label="所属小区">
                <el-select
                  v-model="complainForm.community_code"
                  placeholder="请输入"
                  style="width: 350px"
                  disabled
                >
                  <el-option
                    v-for="item in selectHome"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="联系方式"
                style="width: 350px; margin-left: 30px"
              >
                <el-input v-model="complainForm.title" autocomplete="off" disabled />
              </el-form-item>
            </el-row>

            <el-row type="flex">

              <el-form-item
                label="投诉名称"
                style="width: 350px; "
              >
                <el-input v-model="complainForm.title" autocomplete="off" disabled />
              </el-form-item>
              <el-form-item label="活动状态" style="width: 350px;margin-left: 30px">
                <el-col>
                  <el-radio v-model="complainForm.is_anonymity" disabled :label="0">不匿名</el-radio>
                  <el-radio v-model="complainForm.is_anonymity" disabled :label="1">匿名</el-radio>
                </el-col>
              </el-form-item>
            </el-row>

            <el-row type="flex">
              <el-form-item label="问题图片" style="width: 350px">
                <div style="width:150px;height:150px">
                  <img width="100px" height="100px" :src="`http://124.223.14.236:8881${complainForm.an_photo}`">
                </div>
              </el-form-item>

            </el-row>

          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="回复信息" name="second">
        <div class="demo-drawer__content">
          <el-form ref="form" label-position="top" :rules="rules" :model="complainForm">
            <el-row type="flex">
              <el-form-item label="处理状态">
                <el-radio v-model="complainForm.status" :label="0">待受理</el-radio>
                <el-radio v-model="complainForm.status" :label="1">已受理</el-radio>
                <el-radio v-model="complainForm.status" :label="2">已处理</el-radio>
              </el-form-item>
              <el-form-item
                label="回复图片"
                style="width: 350px; margin-left: 180px"
              >
                <ImageUpload ref="imgUrl" />
              </el-form-item>
            </el-row>

            <el-row type="flex">
              <el-form-item label="回复内容" prop="reply">
                <quillEditor v-model="complainForm.reply" />
              </el-form-item>

            </el-row>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <hr class="footer">
    <div class="demo-drawer__footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </div>

  </el-drawer>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { getComplainDetailApi, editComplainApi } from '@/api/service'
export default {
  name: 'EditRepair',

  components: {
    quillEditor
  },
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    selectHome: {
      type: Array,
      default: () => []
    }

  },
  data() {
    return {
      activeName: 'first',
      complainForm: {
        an_photo: '',
        community_code: '',
        id: '',
        is_anonymity: 0,
        reply: '',
        status: 2,
        tel: '',
        title: '',
        qu_photo: '',
        updata_time: '',
        create_time: ''
      },

      rules: {
        status: [{ required: true, message: '请勾选', trigger: 'blur' }],
        reply: [{ required: true, message: '请输入回复内容', trigger: 'blur' }]
      }
    }
  },
  created() {

  },
  methods: {
    handleClose() {
      this.$emit('update:drawer', false)
    },
    // 回显
    async  getComplainDetail(id) {
      const res = await getComplainDetailApi(id)
      this.$refs.imgUrl.fileList = [
        {
          url: 'http://124.223.14.236:8881' + res.data.an_photo, // 显示图片
          realtiveUrl: res.data.an_photo // 提交时图片地址
        }
      ]
      this.complainForm.id = id
      this.complainForm = res.data
      console.log(this.complainForm)
    },
    onSubmit() {
      this.$refs.form.validate(async flag => {
        if (!flag) return
        this.complainForm.an_photo = this.$refs.imgUrl.fileList[0].realtiveUrl
        await editComplainApi(this.complainForm)
        // console.log(this.form)
        this.$parent.initData()
        this.$message.success('回复成功')
        this.handleClose()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.footer{
  margin: 40px 0 10px 0;
}
::v-deep .el-drawer__header {
  margin-bottom: 15px;
  position: relative;
  margin-left: 56px;
}
::v-deep .el-icon-close {
  position: absolute;
  left: -35px;
  top: 18px;
}
::v-deep .el-radio {
  margin-right: 15px;
}
::v-deep .ql-container{
  height: 100px;
}
.demo-drawer__content{
  height: 470px;
}
.demo-drawer__footer{
  float: right;
  margin-right: 30px;
}
::v-deep .el-form--label-top .el-form-item__label{
  padding: 0;
}
::v-deep .el-form-item{
  margin-bottom: 0;
}
</style>
